<template>
  <div class="share-profit">
    <c-title :hide="false" text="合伙人分润"></c-title>
    <div class="header">
      <div class="info-box">
        <div class="img">
          <img :src="member.avatar_image" alt />
        </div>
        <div class="info nickname">{{ member.nickname }}</div>
      </div>
      <div class="total">离子总数：{{ ion }}</div>
    </div>
    <van-tabs v-model="active" sticky>
      <van-tab title="收入明细">
        <div class="list-box">
          <div class="list-item" v-for="(item,i) in listData" :key="i">
            <div class="list-title">
              <div class="sn">{{item.order_sn}}</div>
              <div>+{{item.reward}}</div>
            </div>
            <div class="list-info">
              <div>订单金额：{{item.order_amount}}</div>
              <div>抽取比例：{{item.extract_order_rate}}%</div>
              <div>分润比例：{{item.profit_rate}}%</div>
            </div>
            <div class="time">{{item.created_at}}</div>
          </div>
          <div class="loading" v-show="loading">
            <van-loading>加载数据中...</van-loading>
          </div>
          <div v-if="listData.length>0 && !loading && !isLoadMore" style="margin-top: 1rem; color: #333; text-align: center;">没有更多了~~~</div>
          <yz-blank text="暂无数据" v-show="!loading" :datas="listData"></yz-blank>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { scrollMixin } from '@/utils/mixin';
export default {
  mixins:[scrollMixin],
  data() {
    return {
      member: {},
      ion: 0,
      active:0,
      isLoadMore:false,
      loading:false,
      listData:[],
      page:1,
      last_page:1
    }
  },
  created(){
    this.getData();
  },
  methods:{
    initData(){
      this.page = 1;
      this.listData = [];
      this.isLoadMore = false;
      this.loading = true;
      this.last_page = null;
    },
    getData(){
      this.initData();
      $http.post("plugin.member-synchron.frontend.assets.income-list",{page:1}).then(({result,msg,data})=>{
        this.loading = false;
        if(result == 1){
          this.member = data.member;
          this.ion = data.ion;
          this.listData = data.income_list.data;
          this.last_page = data.income_list.last_page;
          this.isLoadMore = !(this.page == this.last_page);
        }else this.$toast(msg);
      })
    },
    getMoreData(){
      if(!isLoadMore){
        return this.$toast("没有更多了");
      }
      this.loading = true;
      let page = this.page + 1;
      $http.post("plugin.member-synchron.frontend.assets.income-list",{page}).then(({result,msg,data})=>{
        this.loading = false;
        if(result == 1){
          this.listData = this.listData.concat(data.income_list.data);
          this.page = page;
          this.isLoadMore = !(this.page == this.last_page);
        }else this.$toast(msg)
      })
    }
  },
  components:{
    yzBlank:()=>import("components/ui_components/yz_blank")
  }
}
</script>
<style lang="scss" scoped>
.share-profit {
  text-align: left;

  .header {
    width: 100%;
    background-color: #ee2e2b;
    color: #fff;

    .info-box {
      height: 6rem;
      display: flex;
      align-items: center;
      padding-left: 1.5rem;

      .img {
        img {
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
        }
      }
      .nickname { margin-left: 0.8rem; }
    }

    .total {
      height: 2rem;
      background-color: #f14d4b;
      line-height: 2rem;
      padding-left: 1rem;
    }
  }

  .list-box {
    background-color: #fff;
    padding: 1rem;

    .list-item {
      border-bottom: 1px #f5f5f5 solid;
      font-size: 0.75rem;
      color: #929292;
      padding: 0.5rem 0;

      .list-title {
        display: flex;
        font-size: 0.875rem;
        color: #ef4136;

        .sn {
          flex: 1;
          color: #101010;
        }
      }

      .list-info {
        display: flex;
        justify-content: space-between;
        margin: 0.4rem 0;
      }
    }

    .loading {
      display: flex;
      justify-content: center;
      margin-top: 0.625rem;
    }
  }
}
</style>